<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事务</title>
</head>
<body>
<img id="img" src="../img/1.jpg" />
<br>
<!--<button id="up" onclick="up()">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button id="down" onclick="down()">下一张</button>-->
    <button id="up">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button id="down">下一张</button>
    </body>
    <script>
    //显示第一张图片
    function up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "../img/1.jpg");
    }

    //显示第二张图片
    function down() {
        let img = document.getElementById("img");
        img.setAttribute("src", "../img/2.jpg");

    }

   //显示上一张图片
    let upBtn = document.getElementById("up");
    upBtn.onclick = up;

    //下一张按绑定事件
    let downBtn = document.getElementById("down");
    downBtn.onclick = down;
</script>
</html>